<template>
  <div style="padding: 0 15px;" v-loading="loading">
    <el-collapse-transition>
      <div v-show='listWrap'>
        <el-form :inline="true" :model="search" class="search" @keyup.enter.native="reList" style="height:auto">
          <!-- {{date}} -->
          <el-form-item>
            <el-date-picker v-model="date" :clearable='false' type="daterange" range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" @change='timeChange'
              :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.search_name" placeholder="搜索操作人或关键字" clearable prefix-icon="el-icon-search"
              @clear="reList" style="width:180px;"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-select v-model="search.operator_identity" @change="reList" class="autoWidth">
              <el-option v-for="item in allType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="search.model_type" @change="reList" class="autoWidth">
              <el-option v-for="item in allModule" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary"  size="small" @click="reList()" title='点击搜索'>搜索</el-button>
            <el-button  @click="reset()" plain size="small" title='重置搜索条件'>重置</el-button>
          </el-form-item>
        </el-form>
        <el-table style="width: 100%" :data="tableData" border highlight-current-row stripe table-layout='auto' :row-class-name="tableRowClassName">
          <el-table-column label="操作人" prop="operator_name" align="center"  width="150"></el-table-column>
          <el-table-column label="操作角色" prop="operator_identity" align="center" width="90"></el-table-column>
          <el-table-column label="方法名称" prop="method_name" align="center" width="140"></el-table-column>
          <el-table-column label="操作模块" prop="model_type" align="center" width="100"></el-table-column>
          <el-table-column label="操作描述" prop="operator_content" align="center"></el-table-column>
          <el-table-column label="操作时间" prop="insert_time" align="center" width="180"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :currentPage=search.pageNo :page-size=search.pageSize :page-sizes="[10, 20,40, 50, 100]" :hide-on-single-page="allTotal==0"
          layout="total, sizes, prev, pager, next, jumper" :total="allTotal" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-collapse-transition>
    <!-- :hide-on-single-page="allTotal<20" -->
  </div>
</template>
<script>
export default {
  name: 'logList',
  data() {
    return {
      tableData: [],
      // 班级详情搜索
      loading: false,
      listWrap: true,
      // 总条数
      allTotal: 0,
      allType: [{
        value: '',
        label: '操作角色'
      }, {
        value: '教师',
        label: '教师'
      }, {
        value: '家长',
        label: '家长'
      }],

      allModule: [{
        value: '',
        label: '全部模块'
      }, {
        value: '当日考勤',
        label: '当日考勤'
      }, {
        value: '学生考勤',
        label: '学生考勤'
      }, {
        value: '考勤设置',
        label: '考勤设置'
      }],
      search: {
        search_name: '',
        begin_date: '',
        end_date: '',
        operator_identity: '',
        model_type: '',
        date: '',
        pageNo: 1,
        pageSize: 10
      },
      date: [],
      nowView: '',
      org_name: '',
      image: '',
      sealShow: true,
      time: '',
      restaurants: [],
      flagTime: '',
      pickerOptions: {
        // 最长选择2个月
        onPick: ({ maxDate, minDate }) => {
          this.flagTime = minDate.getTime()
          if (maxDate) {
            this.flagTime = ''
          }
        },
        disabledDate: (time) => {
          if (this.flagTime !== '') {
            const one = 30 * 24 * 3600 * 1000 * 2
            const minTime = this.flagTime - one
            const maxTime = this.flagTime + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  watch: {
  },
  created() {
    let _this = this
    const todayDate=new Date().toJSON().substr(0, 10)
    _this.$nextTick(() => {
      _this.date = [todayDate + ' 00:00:00', todayDate + ' 00:00:00']
      _this.list()
    })
  },
  computed: {
  },
  methods: {
    // 判断当前日志是否是删除
    tableRowClassName({row, rowIndex}) {
        if (row.method_name.includes('删除')) {
          return 'warning-row'
        }
        return ''
    },
    searchParameter() {
        // 生成模板查询条件
      this.search.begin_date = this.date[0]?this.date[0].substr(0, 10):''
      this.search.end_date = this.date[1]?this.date[1].substr(0, 10):''
      return this.search
    },
    // 只能输入小数和整数35-42
    checkedNumber(value, obj) {
      const oldValue = value
      value = value.replace(/[^\d|.]/g, '')
      let dealValue = value < 35 || value > 42.9 ? '' : value
      this.allTemperature[obj] = dealValue
      if (value === '' && oldValue !== '') {
        // this.$message('只能输入35-42的数字', '提示', { type: 'warning' })
        this.$message({
          message: '只能输入35-42.9的数字',
          type: 'warning'
        })
      } else {
        this.list()
      }
    },
    // 提问输入自动完成
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll() {
      let allTemperatureArray = []
      let InitialNumber = 35
      for (let a = 350, b = 430; a < b; a++) {
        allTemperatureArray.push({ 'value': InitialNumber.toFixed(1), 'address': '℃' })
        InitialNumber += 0.1
      }
      return allTemperatureArray
    },
    handleSelect(item, i) {
      console.log(item)
      this.allTemperature[i] = item.value
      this.list()
    },

    // 自适应表格列宽
    setWidth(str, tableData) {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      str = str + ''
      let columnContent = ''
      let maxObj = null
      if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }

      let nowL = str.replace('key', '')
      // 获取该列中最长的数据(内容)
      let index = 0
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i][nowL][str] === null) {
          return
        }

        const nowTemp = tableData[i][nowL][str].value || tableData[i][nowL][str].title + ''
        const maxTemp = (maxObj ? maxObj.value : '') || tableData[index][nowL][str].value || tableData[index][nowL][str].title + ''

        if (nowTemp.length > maxTemp.length) {
          // index = i
          maxObj = tableData[i][nowL][str]
        } else {
          maxObj = maxObj || tableData[index][nowL][str] || tableData[index][nowL][str]
        }
      }
      console.log(maxObj.value)
      if (maxObj.type === 7) {
        for (let a = 0, b = maxObj.value.split(',').length; a < b; a++) {
          columnContent += '刘9'
        }
      } else {
        columnContent = maxObj.value || maxObj.title + ''
      }
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      for (const char of columnContent) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 12
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 18
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 9
        }
      }
      if (flexWidth < 100) {
        // 设置最小宽度
        flexWidth = 100
      }
      return flexWidth + 'px'
    },
    timeChange(e, b) {
      // if (typeof e !== 'object') {
      //   this.date = [e, e]
      // }else{
      this.date = e
      this.search.pageNo = 1
      this.list()
    },
    // 获取日志详情
    async getLogDetail(row) {
      this.loading = true
      const res = await this.$api.plan.templateList.get({})
      if (res.code === 200) {
        this.loading = false
        // 显示日志详情（考情设置）
      } else {
        this.loading = false
        this.$alert(res.message, '提示', { type: 'error', closeOnHashChange: !1 })
      }
    },
    // 重置搜索条件
    reList() {
      this.search.pageNo = 1
      this.list()
    },
    // 获取日志列表
    async list() {
      this.loading = true
      const res = await this.$api.log.list.get(this.searchParameter())
      if (res.code === 200) {
        // 格式化数据
        this.tableData = res.data.data
        this.allTotal=res.data.total
        this.loading = false
      } else {
        this.loading = false
        this.$alert(res.message, '提示', { type: 'error', closeOnHashChange: !1 })
      }
    },

    gradeChange(val) {
      this.getNowAllClass = this.allClass[val]
      this.search.search_class = this.allClass[val][0].clas_id
      this.search.pageNo = 1
      this.list()
    },
    // 分页操作-修改显示页数-每页显示指定条数
    handleSizeChange(e) {
      this.search.pageNo = 1
      this.search.pageSize = e
      this.list()
    },
    // 分页操作-跳转到指定页 跳转到指定页数
    handleCurrentChange(e) {
      this.search.pageNo = e
      this.list()
    },
    reset() {
      this.search = {
        search_name: '',
        begin_date: '',
        end_date: '',
        operator_identity: '',
        model_type: '',
        date: '',
        pageNo: 1,
        pageSize: 20
      }
      const todayDate=new Date().toJSON().substr(0, 10)
      this.$nextTick(() => {
        this.date = [todayDate + ' 00:00:00', todayDate + ' 00:00:00']
        this.list()
      })
    },
    // 弹出窗口 日期相关操作++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // 关闭预览窗口 提示
    handleClose(done) {
      this.$confirm('确认要关闭编辑窗口吗？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 输入校验 文档：校验文字<>& {} |*=;%  单行文本框禁止输入英文特殊字符<>&{}|*=;%
    checkText(string) {
      // const pattern = /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g
      const pattern = /[`<>& {} |*=;%\s]/g
      const str = string.replace(pattern, '')
      this.dialogForm.plan_name = str
    },
    // A 数组 是否包含B数组
    arrayIncludes(arr1, arr2) {
      return arr2.every(val => arr1.includes(val))
    }
    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  }
}
</script>
<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}

.el-table td,
.el-table th {
  padding: 5px 0;
  font-size: 14px;
}

.el-table td .el-button {
  padding: 8px 0px;
}

.el-link {
  margin-right: 10px;
}

.el-table__empty-block {
  max-height: 99px;
}

.el-textarea .el-input__count {
  background: none;
  bottom: -36px;
}

.el-dialog__body {
  padding: 0 30px;
  border: 1px #fff solid;
}

.checkSendObj .el-checkbox-group {
  margin-left: 21px;
  display: flex;
}

.search {
  background: #fbfafa;
  padding: 10px 12px 12px 12px;
  min-height: 30px;
  height: 36px;
  overflow: hidden;
}

.search .el-form-item {
  margin-bottom: 0;
}

.search .el-range-editor.el-input__inner {
  padding: 0px 10px;
  margin-top: 0px;
}

.el-pagination {
  padding: 18px 0px;
}

.checkSendObj .el-form-item__content {
  padding-left: 20px;
}

.search .el-form-item__content {
  padding-left: 0;
}
.search .el-range-editor.el-input__inner{
  margin-top: 5px;
}
.el-popover {
  max-width: 240px;
}

.el-popconfirm__main {
  padding: 5px 0;
}

body {
  overflow: auto;
  background-color: #fff;
}

.fileInput input {
  border: none;
}

/* 统计信息 */
.echarsWrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 15px;
  position: relative;
  padding: 20px 20px 0px 20px;
}

.echarsWrap legend {
  color: #496f8f;
  font-weight: bold;
}

.echarsWrap fieldset {
  margin-left: 15px;
  background-image: -webkit-linear-gradient(330deg, #fbfdff, #e1e8ef);
  background-image: -o-linear-gradient(330deg, #fbfdff, #e1e8ef);
  background-image: linear-gradient(120deg, #fbfdff, #e1e8ef);
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 40px 0px 20px;
  position: relative;
}

.oneEcharsShow .oneEcharsNum {
  font-size: 24px;
  font-family: "sans-serif";
  font-weight: bold;
  line-height: 44px;
  text-align: center;
  height: 48px;
}

.planTitleWrap .planTitle {
  font-weight: bold;
  font-size: 16px;
}

.echarsWrap .oneEcharsTitle {
  font-size: 12px;
  position: absolute;
  right: 20px;
  top: 20px;
}

.el-table .cell {
  line-height: 24px;
  transform: translate3d(0, 0, 0);
}

.el-picker-panel__footer button:first-child {
  display: none;
}

.el-table__fixed-right {
  min-height: 75px;
}

.el-image-viewer__actions,
.el-image-viewer__close {
  overflow: hidden;
}

.imgList {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

.imgList img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: zoom-in;
}

.el-input--suffix .el-input__inner {
  padding-right: 6px;
}

.el-date-editor--daterange.el-input__inner {
  width: 280px;
}

.el-form--inline .el-form-item {
  margin-right: 2px;
}

.el-image-viewer__next,
.el-image-viewer__prev,
.el-image-viewer__close {
  display: -webkit-inline-box;
  overflow: hidden;
}

.temperature .el-input--suffix .el-input__suffix {
  top: -5px;
}

.temperature .el-input--suffix .el-input-group__prepend .el-input__suffix {
  top: 5px;
}

.el-input-group__prepend {
  background: #fff;
}

.autoWidth {
  min-width: 120px;
  text-align: start;
}

.autoWidth .el-input__prefix {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ffffff00;
  padding: 0 40px;
  height: 40px;
  line-height: 40px;
  color: #606266;
  left: 0;
  visibility: hidden;
}

/* .autoWidth .el-input__inner {
  position: absolute;
} */
</style>
